{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>下拉菜单</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>下拉菜单用于实现当用户点击一个元素时弹出一个浮动的菜单层。</p></article>











<section><header><h3>结构</h3></header><article><p>下拉菜单由触发元素（例如按钮）和浮动（<code>.dropdown-menu</code>）组成。你需要为触发元素添加 <code>[data-toggle="dropdown"]</code> 属性。</p><p>触发元素和 浮动菜单 <code>.dropdown-menu</code> 通常都需要放置在 <code>.dropdown</code> 容器元素内，但也可以使用任何 <code>position: relative</code> 的元素作为下拉菜单容器。</p><h4>示例</h4><div style="height: 164px" class="example">
  <div class="dropdown open">
    <button class="btn" type="button">菜单按钮 <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="###">操作</a></li>
      <li><a href="###">另一个操作</a></li>
      <li><a href="###">更多操作</a></li>
    </ul>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">菜单按钮 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>自动展开</h4><p>默认情况下当点击触发按钮时会展开下拉菜单，如果需要自动（在鼠标悬停时展开），只需要为 <code>.dropdown</code> 增加 <code>.dropdown-hover</code> 类。</p><div style="height: 164px" class="example">
  <div class="dropdown dropdown-hover">
    <button class="btn" type="button">鼠标悬停展开菜单按钮 <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="###">操作</a></li>
      <li><a href="###">另一个操作</a></li>
      <li><a href="###">更多操作</a></li>
    </ul>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown dropdown-hover"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">鼠标悬停展开菜单按钮 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>





<section><header><h3>使用按钮组</h3></header><article><p>在<a href="#component/buttongroup">按钮组</a> <code>.btn-group</code> 元素可以直接作为下拉菜单父级容器，从而不需要额外的 <code>.dropdown</code> 元素。</p><div class="example">
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      菜单按钮 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="###">操作</a></li>
      <li><a href="###">删除</a></li>
      <li class="divider"></li>
      <li><a href="###">撤销</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-danger">菜单按钮</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="###">操作</a></li>
      <li><a href="###">另一个操作</a></li>
      <li class="divider"></li>
      <li><a href="###">更多操作</a></li>
    </ul>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- 按钮组 --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">
    菜单按钮 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="com">&lt;!-- 分割按钮组 --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-danger"</span><span class="tag">&gt;</span><span class="pln">菜单按钮</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-danger dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">删除</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">撤销</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><p>使用按钮组来实现下拉菜单的一个好处就是多个按钮组下拉菜单可以在一行显示。</p></article></section>






<section><header><h3>下拉菜单三角图标</h3></header><article><p>在下拉菜单按钮内包含 <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> 来显示一个三角图标。你也可以使用 <a href="#control/icon">字体图标</a> 来替代。</p><div class="example">
  <button class="btn" type="button">菜单按钮 <span class="caret"></span></button>
  <button class="btn" type="button">菜单按钮 <i class="icon-caret-down"></i></button>
  <button class="btn" type="button">更多 <i class="icon-ellipsis-v"></i></button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">菜单按钮 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">菜单按钮 </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-caret-down"</span><span class="tag">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">更多 </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-ellipsis-v"</span><span class="tag">&gt;&lt;/i&gt;&lt;/button&gt;</span></code></pre></article></section>




<section><header><h3>标题和分割线</h3></header><article><p>在 <code>.dropdown-menu</code> 内使用 <code>.dropdown-header</code> 来显示标题，使用 <code>.divider</code> 来显示分割线。</p><div style="height: 230px" class="example">
  <div class="dropdown open">
    <button class="btn" type="button">菜单按钮 <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">下拉菜单标题</li>
      <li><a href="###">操作</a></li>
      <li><a href="###">另一个操作</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">更多操作</li>
      <li><a href="###">修改</a></li>
    </ul>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown open"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">菜单按钮 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-header"</span><span class="tag">&gt;</span><span class="pln">下拉菜单标题</span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-header"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">修改</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>








<section><header><h3>浮动方向</h3></header><article><p>通常情况下，下拉菜单会在触发元素下发弹出，可以为下拉菜单父级元素(<code>.dropdown</code> 或 <code>.btn-group</code>）添加 <code>.dropup</code> 类时下拉菜单在出发元素上方弹出。</p><p>在水平方向上下拉菜单左侧会与触发元素的左侧对齐，为 <code>.dorpdown-menu</code> 添加 <code>.pull-right</code> 可以使得下拉菜单的右侧与触发元素的右侧对齐。</p><div class="example">
  <div class="btn-group">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">下方左侧对齐 <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="###">操作</a></li>
      <li><a href="###">另一个操作</a></li>
      <li class="divider"></li>
      <li><a href="###">更多操作</a></li>
    </ul>
  </div>
  <div class="btn-group dropup">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">上方左侧对齐 <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="###">操作</a></li>
      <li><a href="###">另一个操作</a></li>
      <li class="divider"></li>
      <li><a href="###">更多操作</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">下方右侧对齐 <span class="caret"></span></button>
    <ul class="dropdown-menu pull-right" role="menu">
      <li><a href="###">操作</a></li>
      <li><a href="###">另一个操作</a></li>
      <li class="divider"></li>
      <li><a href="###">更多操作</a></li>
    </ul>
  </div>
  <div class="btn-group dropup">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">上方右侧对齐 <span class="caret"></span></button>
    <ul class="dropdown-menu pull-right" role="menu">
      <li><a href="###">操作</a></li>
      <li><a href="###">另一个操作</a></li>
      <li class="divider"></li>
      <li><a href="###">更多操作</a></li>
    </ul>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">下方左侧对齐 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group dropup"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">上方左侧对齐 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">下方右侧对齐 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu pull-right"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group dropup"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">上方右侧对齐 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu pull-right"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>







<section><header><h3>多级子菜单</h3></header><article><p>可以在 <code>.dropdown-menu</code> 内的 <code>&lt;li&gt;</code> 内包含另一个 <code>.dropdown-menu</code> 从而实现多级子菜单。包含子菜单 <code>&lt;li&gt;</code> 需要添加额外的类 <code>.dropdown-submenu</code>。</p><p>一般情况下子菜单会在菜单项的右侧显示，但也可以为作为子菜单的 <code>.dropdown-menu</code> 添加 <code>.pull-left</code> 类来使得子菜单在左侧显示。</p><div style="height: 210px; padding-left: 140px" class="example">
  <div class="dropdown open">
    <button class="btn" type="button" data-toggle="dropdown">菜单按钮 <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a href="###">打开</a>
        <ul class="dropdown-menu">
          <li><a href="###">运行</a></li>
          <li><a href="###">在终端中打开</a></li>
          <li><a href="###">在编辑器中打开</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a href="###">一组操作</a>
        <ul class="dropdown-menu">
          <li class="dropdown-submenu">
            <a href="###">修改</a>
            <ul class="dropdown-menu">
              <li><a href="###">修改标题</a></li>
              <li><a href="###">更新内容</a></li>
              <li><a href="###">转移</a></li>
            </ul>
          </li>
          <li class="dropdown-submenu">
            <a href="###">删除</a>
            <ul class="dropdown-menu">
              <li><a href="###">移动到回收站</a></li>
              <li><a href="###">直接删除</a></li>
            </ul>
          </li>
          <li><a href="###">撤销</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a href="###">另一组操作</a>
        <ul class="dropdown-menu">
          <li><a href="###">评审</a></li>
          <li><a href="###">计划</a></li>
          <li><a href="###">关闭</a></li>
        </ul>
      </li>
      <li class="divider"></li>
      <li class="dropdown-submenu">
        <a href="###">在左侧显示</a>
        <ul class="dropdown-menu pull-left">
          <li><a href="###">复制</a></li>
          <li><a href="###">粘贴</a></li>
          <li><a href="###">剪切</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div><pre class="pre-scrollable linenums prettyprint prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">菜单按钮 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-submenu"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">打开</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">运行</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">在终端中打开</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">在编辑器中打开</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/li&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-submenu"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">一组操作</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-submenu"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">修改</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">修改标题</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更新内容</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">转移</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/li&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-submenu"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">删除</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">移动到回收站</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">直接删除</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">          </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;/li&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">撤销</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/li&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-submenu"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一组操作</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">评审</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">计划</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">关闭</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/li&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-submenu"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">在左侧显示</span><span class="tag">&lt;/a&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu pull-left"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">复制</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">粘贴</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">剪切</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/li&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/ul&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre></article></section>




<section><header><h3>禁用的菜单项</h3></header><article><p>为菜单项 <code>&lt;li&gt;</code> 添加 <code>.disabled</code> 类即可获得禁用外观。</p><div style="height: 164px" class="example">
  <div class="dropdown open">
    <button class="btn" type="button">菜单按钮 <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="###">操作</a></li>
      <li class="disabled"><a href="###">被禁用的操作</a></li>
    </ul>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">菜单按钮 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"disabled"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">被禁用的操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<style>
/* 自定义下拉菜单外观 */
.dropdown-menu-table {
  padding: 0;
  border: none;
}
.dropdown-menu-table .table {
  margin-bottom: 0;
}
.dropdown-menu-table .table td {
  padding: 0;
}
.dropdown-menu-table .table a {
  padding: 8px;
  display: block;
}
.dropdown-menu-table .table a:hover,
.dropdown-menu-table .table a:active,
.dropdown-menu-table .table a:focus {
  background-color: #e5e5e5;
  text-decoration: none;
}
</style>



<section><header><h3>自定义菜单</h3></header><article><p>通常情况下下拉菜单列表使用 <code>&lt;ul&gt;</code> 元素，你也可以替换为其他元素或内容。</p><div style="height: 260px" class="example">
  <div class="dropdown open">
    <button class="btn" type="button" data-toggle="dropdown">自定义下拉菜单 <span class="caret"></span></button>
    <div class="dropdown-menu dropdown-menu-table">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>常用操作</th>
            <th>更多操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><a href="###">修改</a></td>
            <td><a href="###">打开</a></td>
          </tr>
          <tr>
            <td><a href="###">编辑</a></td>
            <td><a href="###">运行</a></td>
          </tr>
          <tr>
            <td><a href="###">删除</a></td>
            <td><a href="###">调试</a></td>
          </tr>
          <tr>
            <td><a href="###">移动</a></td>
            <td><a href="###"></a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">自定义下拉菜单 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu dropdown-menu-table"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-bordered"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;thead&gt;</span><span class="pln">
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
          </span><span class="tag">&lt;th&gt;</span><span class="pln">常用操作</span><span class="tag">&lt;/th&gt;</span><span class="pln">
          </span><span class="tag">&lt;th&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/th&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
      </span><span class="tag">&lt;/thead&gt;</span><span class="pln">
      </span><span class="tag">&lt;tbody&gt;</span><span class="pln">
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
          </span><span class="tag">&lt;td&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">修改</span><span class="tag">&lt;/a&gt;&lt;/td&gt;</span><span class="pln">
          </span><span class="tag">&lt;td&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">打开</span><span class="tag">&lt;/a&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
          </span><span class="tag">&lt;td&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">编辑</span><span class="tag">&lt;/a&gt;&lt;/td&gt;</span><span class="pln">
          </span><span class="tag">&lt;td&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">运行</span><span class="tag">&lt;/a&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
          </span><span class="tag">&lt;td&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">删除</span><span class="tag">&lt;/a&gt;&lt;/td&gt;</span><span class="pln">
          </span><span class="tag">&lt;td&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">调试</span><span class="tag">&lt;/a&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
          </span><span class="tag">&lt;td&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">移动</span><span class="tag">&lt;/a&gt;&lt;/td&gt;</span><span class="pln">
          </span><span class="tag">&lt;td&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;&lt;/a&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
      </span><span class="tag">&lt;/tbody&gt;</span><span class="pln">
    </span><span class="tag">&lt;/table&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-css"><span class="com">/* 自定义下拉菜单外观 */</span><span class="pln">
</span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">menu</span><span class="pun">-</span><span class="pln">table </span><span class="pun">{</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
  border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">menu</span><span class="pun">-</span><span class="pln">table </span><span class="pun">.</span><span class="pln">table </span><span class="pun">{</span><span class="pln">
  margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">menu</span><span class="pun">-</span><span class="pln">table </span><span class="pun">.</span><span class="pln">table td </span><span class="pun">{</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">menu</span><span class="pun">-</span><span class="pln">table </span><span class="pun">.</span><span class="pln">table a </span><span class="pun">{</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8px</span><span class="pun">;</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">menu</span><span class="pun">-</span><span class="pln">table </span><span class="pun">.</span><span class="pln">table a</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span><span class="pln">
</span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">menu</span><span class="pun">-</span><span class="pln">table </span><span class="pun">.</span><span class="pln">table a</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span><span class="pln">
</span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">menu</span><span class="pun">-</span><span class="pln">table </span><span class="pun">.</span><span class="pln">table a</span><span class="pun">:</span><span class="pln">focus </span><span class="pun">{</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#e5e5e5;</span><span class="pln">
  text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre></article></section>



<style>
@media (max-width: 767px) {
  .example-dropdown-in-navs .col-md-4 + .col-md-4 {
    margin-top: 20px;
  }
}
</style>

<section><header><h3>在导航或导航条中使用</h3></header><article><p>在<a href="#component/nav">导航</a>和<a href="#component/navbar">导航条</a>中使用下拉菜单也非常方便，直接使用导航条目 <code>&lt;li&gt;</code> 作为下拉菜单父级容器并为其添加 <code>.dropdown</code> 类。</p><div class="example-dropdown-in-navs example">
  <div class="row">
    <div class="col-md-4">
      <ul class="nav nav-primary">
        <li class="active"><a href="###">首页</a></li>
        <li><a href="###">演示</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">下拉菜单 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="###">操作</a></li>
            <li><a href="###">另一个操作</a></li>
            <li class="divider"></li>
            <li><a href="###">更多操作</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <ul class="nav nav-pills">
        <li class="active"><a href="###">首页</a></li>
        <li><a href="###">演示</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">下拉菜单 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="###">操作</a></li>
            <li><a href="###">另一个操作</a></li>
            <li class="divider"></li>
            <li><a href="###">更多操作</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <ul class="nav nav-tabs">
        <li class="active"><a href="###">首页</a></li>
        <li><a href="###">演示</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">下拉菜单 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="###">操作</a></li>
            <li><a href="###">另一个操作</a></li>
            <li class="divider"></li>
            <li><a href="###">更多操作</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav nav-primary"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">首页</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">演示</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-toggle"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">下拉菜单 </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caret"</span><span class="tag">&gt;&lt;/span&gt;&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown-menu"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">另一个操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"divider"</span><span class="tag">&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">更多操作</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
  </span><span class="tag">&lt;/li&gt;</span><span class="pln">
</span><span class="tag">&lt;/ul&gt;</span></code></pre></article></section></div>
</section>
{/block}